import React, { Component } from 'react';
import "./index.scss"
import { Form, Input, Icon, Checkbox } from 'antd'
import {connect} from 'react-redux'
import {CheckUserLogin} from '@/store/actions/auth'
import {setUserInfo} from '@/utils/auth'
import {Encrypt,Decrypt} from '@/utils/tools'
import {message} from 'antd'

class Login extends Component {

    constructor(props) {
        super(props);
        
        this.state = {
            pwdKey:'A2EB63B71DEA4B273AAFA4BA332A01EB',
            userKey:'678477FBED35FE215D719454EC6340B2'
        }
    }
    
    componentDidMount(){
        this.resetRememberUser()
    }

    validFormdata = (rule, value, callback) => {
        let reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]{5,14}$/;
        if(!value){
            callback('不能为空')
        }else{
            if(reg.test(value)){
                callback()
            }else{
                callback('请检查格式，5-14位数字大小字母下划线')
            }
        }
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields((err, values)=>{
            if(!err){
                this.debugLogin(values)
            }
        })
    }

    debugLogin(data){
        const {dispatch} = this.props
        dispatch(CheckUserLogin(data)).then(res=>{
            if(this.props.auth.login_status){
                this.rememberUser(data)
                setUserInfo(Encrypt(data.username), Encrypt(data.password))
                this.props.history.push('/')
            }else{
                message.error('登录失败，请检查')
            }
        })
    }

    rememberUser(data){
        let isRemember = this.props.form.getFieldValue('isRemember')
        if(isRemember){
            localStorage.setItem(this.state.userKey,Encrypt(data.username))
            localStorage.setItem(this.state.pwdKey,Encrypt(data.password))
        }else{
            localStorage.clear()
        }
    }

    resetRememberUser(){
        if(localStorage.getItem(this.state.userKey)) {
            this.props.form.setFieldsValue({
                username:Decrypt(localStorage.getItem(this.state.userKey))
            }) 
            this.props.form.setFieldsValue({isRemember:true})
        }
        if(localStorage.getItem(this.state.pwdKey)){
            this.props.form.setFieldsValue({
                password:Decrypt(localStorage.getItem(this.state.pwdKey))
            })
            this.props.form.setFieldsValue({isRemember:true})
        }
    }

    render() {

        const { getFieldDecorator } = this.props.form 

        return (
            <div className="login_container">
                <div className="form_container">
                    <h3 className="tips">深圳巴士智能维保系统</h3>
                    <div className="content">
                        <div className="img_warp">
                            <img src={require("@/assets/login_user.png")} alt="user"/>
                        </div>
                        <div className="form_warp">
                            <Form className="login_form custom-form">
                                <Form.Item>
                                    {getFieldDecorator('username', {
                                        validateTrigger:'onBlur',
                                        rules:[
                                            {
                                                validator:this.validFormdata
                                            }
                                        ]
                                    })(<Input
                                            onPressEnter={this.handleSubmit}
                                            className="custom-input"
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="请输入用户名"
                                        />)}
                                </Form.Item>
                                <Form.Item>
                                    {getFieldDecorator('password', {
                                        validateTrigger:'onBlur',
                                        rules:[
                                            {
                                                validator:this.validFormdata
                                            }
                                        ]
                                    })(<Input
                                            onPressEnter={this.handleSubmit}
                                            className="custom-input"
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="请输入密码"
                                        />)}
                                </Form.Item>
                                <Form.Item className="nm">
                                    {getFieldDecorator('isRemember', {
                                        valuePropName:'checked'
                                    })(<Checkbox><span className="rememberUser">记住用户</span></Checkbox>)}
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                    <div className="submit_div clearfix">
                        <span className="lbtn cancel">取消</span>
                        <span className="lbtn confirm" onClick={this.handleSubmit}>确定</span>
                    </div>
                </div>
            </div>
        );
    }
}

Login = Form.create({})(Login)

const mapStateToProps = state => {
    return {
        auth:state.auth
    }
}

export default connect(mapStateToProps)(Login);